<template>
  <div @click.stop="" class="helpFriends" :style="'width:' +
    (wrapWidth ? wrapWidth : 1000) +
    'px;margin-top:' +
    (noGutter ? '0' : '50px')
    ">
    <transition name="el-fade-in">
      <div class="erweimaerweima" v-if="showForward" v-loading.lock="qrCodeLoading" element-loading-text="拼命加载中"
        element-loading-background="rgba(255, 255, 255, 0.8)">
        <img :src="qrCode" alt="" />
        <p>扫描分享到微信好友</p>
        <p>或微信朋友圈</p>
        <!-- <i
          class="el-icon-close"
          style="
            cursor: pointer;
            position: absolute;
            top: 3px;
            color: #000;
            font-size: 24px;
            right: 6px;
          "
          @click="yc()"
        ></i> -->
      </div>
    </transition>

    <div class="helpFriends_title">
      <div class="helpFriends_title_left">
        <img @click.stop="goUserDetail(s)" class="helpFriends_title_left_img"
          :style="!mini ? '' : 'width:56px;height:56px;'" :src="s.userInfo && s.userInfo.image
            ? s.userInfo.image
            : 'https://pic.bangbangtongcheng.com/static/my/header.png'
            " />
        <div class="helpFriends_title_left_info">
          <div class="helpFriends_title_left_span" @click.stop="goUserDetail(s)" style="cursor: pointer"
            :style="!mini ? '' : 'font-size:18px;'">
            {{
              s.userInfo && s.userInfo.nikeName
              ? s.userInfo.nikeName
              : "未命名用户"
            }}
          </div>
          <div class="vip-level pointer" v-if="s.userInfo" :style="{
            backgroundColor: colors[s.userInfo.memberLevel - 1].bgColor,
            color: colors[s.userInfo.memberLevel - 1].wordColor,
            borderColor: colors[s.userInfo.memberLevel - 1].lineColor,
            padding: !mini ? '4px 0' : '2px 0'
          }">
            {{ $store.state.colors[s.userInfo.memberLevel - 1].level }}
          </div>
        </div>

        <user-label :userInfo="s.userInfo" al="flex-start" style="margin-left:12px;" v-if="!mySelf">
        </user-label>
      </div>
      <div class="helpFriends_title_right" v-if="showCollect">
        <div style="display: flex; align-items: center" v-if="s.whetherCollection == '1'" @click="collect(s, true)">
          <img style="width: 30px; height: 30px" src="../../../assets/shou3.png" />
          <span style="font-size: 18px; color: #333">已收藏</span>
        </div>
        <!-- flex-direction: column; -->
        <div style="
            display: flex;

            align-items: center;
            cursor: pointer;
          " @click="collect(s)" v-else>
          <img style="width: 30px; height: 30px" src="../../../assets/shou2.png" />
          <span style="font-size: 18px; color: #333">收藏</span>
        </div>
      </div>
    </div>
    <div :style="mini ? 'padding-left:78px' : 'padding-left:120px'" @click="friendCircleDetail(s)">
      <div class="helpFriends_article">
        <div :class="s.chage == 0
          ? 'helpFriends_article_active'
          : 'helpFriends_article_text'
          ">
          <div @click.stop>
            <packUpText :text="s.content" @details="friendCircleDetail(s)"></packUpText>
          </div>
        </div>
      </div>
      <!-- @click="updataViewNum()"  :preview-src-list="s.picture"-->
      <template v-if="s.picture">
        <div class="img_list">
          <template v-if="s.picture.length == 1">
            <template v-for="(i, j) in s.picture">
              <el-image class="img_temp1" fit="cover" style="" :src="i" :preview-src-list="s.picture" :key="j" @click.stop="">
              </el-image>
            </template>
          </template>
          <template v-else>
            <template v-for="(i, j) in s.picture">
              <el-image class="img_temp2" fit="cover" style="" :src="i" :preview-src-list="s.picture" :key="j" @click.stop="">
              </el-image>
            </template>
          </template>
        </div>
      </template>
      <template v-if="s.picture && s.picture.length == 1 && false">
        <div class="img_one" @click.stop="preView(s, 0)">
          <img :src="s.picture[0]" alt="" />
        </div>
      </template>
      <template v-else-if="s.picture && s.picture.length == 2 && false">
        <div class="img_two">
          <img :src="i" v-for="(i, j) in s.picture" :key="j" @click.stop="preView(s, j)" />
        </div>
      </template>
      <template v-else-if="s.picture && s.picture.length == 3 && false">
        <div class="img_three">
          <img :src="i" v-for="(i, j) in s.picture" :key="j" alt="" @click.stop="preView(s, j)" />
        </div>
      </template>
      <div v-if="s.video && s.video.length > 0" class="videovideo">
        <div class="video" v-for="(i, j) in s.video" :key="j">
          <video :src="i" controls></video>
        </div>
      </div>

      <div class="byq_new_address byq_add" @click.stop="addressopen" v-if="s.detailedAddress">
        <i class="el-icon-location-information"></i>{{ showNewAddress }}
      </div>

    </div>
    <div :style="mini ? 'padding-left:78px' : 'padding-left:120px'">
      <div class="byq_bottom" :style="s.picture.length == 1 ? '' : 'margin-top:15px'">
        <div class="show-time">
          <!-- {{ s.createDate }} -->
          {{ showTime }}
          <span class="byq_add line1" v-if="false">
            <i class="el-icon-location-information"></i>
            <!-- {{ s.detailedAddress }} -->
            <!-- {{ showNewAddress }} -->
          </span>
        </div>
        <div class="byq_bottom_right" v-if="showBottom">
          <div class="byq_bottom_right_item">
            <img class="byq_bottom_right_item_img" src="../../../assets/bbcz/eye01.png" alt="" />
            <span>{{ s.views }}</span>
          </div>
          <div class="byq_bottom_right_item" @click.stop="goLike(s, 2)">
            <img style="transform: scale(1.2);" class="byq_bottom_right_item_img" src="../../../assets/bbcz/dc02.png"
              alt="" v-if="s.whetherThumbsDown == '1'" />
            <img style="transform: scale(1.2);" class="byq_bottom_right_item_img" src="../../../assets/bbcz/dc01.png"
              alt="" v-else />
            <span>{{ s.downThumb }}</span>
          </div>
          <div class="byq_bottom_right_item" @click.stop="goLike(s, 1)">
            <img class="byq_bottom_right_item_img" src="../../../assets/bbcz/dz02.png" alt=""
              v-if="s.whetherThumbsUp == '1'" />
            <img class="byq_bottom_right_item_img" src="../../../assets/bbcz/dz01.png" alt="" v-else />
            <span>{{ s.upThumb }}</span>
          </div>
          <el-dropdown trigger="click" @command="handleClick" v-if="!forbidClick">
            <span class="el-dropdown-link">
              <div class="byq_bottom_right_item pointer">
                <img class="byq_bottom_right_item_img" src="../../../assets/bbcz/zf01.png" alt="" />
                <span>{{ s.forwardingVolume }}</span>
              </div>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">微信</el-dropdown-item>
              <el-dropdown-item command="2">朋友圈</el-dropdown-item>
              <el-dropdown-item command="3">复制链接</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="byq_bottom_right_item pointer" v-if="forbidClick">
            <img class="byq_bottom_right_item_img" src="../../../assets/bbcz/zf01.png" alt="" />
            <span>{{ s.forwardingVolume }}</span>
          </div>
        </div>
      </div>
    </div>
    <addressmap ref="addmap" key="mapKey" v-if="item.latitude"></addressmap>
  </div>
</template>

<script>
import { wechatTimeFormat } from "@/utils/wxTime.js";
import packUpText from "./packUpText.vue";
import addressmap from "@/components/addressMap.vue";

export default {
  name: 'friendItem',
  components: {
    packUpText,
    addressmap
  },
  props: {
    shopType: {
      //类别
      type: String,
      default: ""
    },
    item: {
      type: Object,
      default() {
        return {};
      }
    },
    types: {
      //类别
      type: String,
      default: ""
    },
    wrapWidth: {
      //类别
      type: String | Number,
      default: 1000
    },
    isNotAllowGoDetails: {
      type: Boolean,
      default: false
    },
    showCollect: {
      type: Boolean,
      default: true
    },
    showBottom: {
      type: Boolean,
      default: true
    },
    forbidClick: {
      type: Boolean,
      default: false
    },
    noGutter: {
      type: Boolean,
      default: false
    },
    mySelf: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loginstate: false,
      img: this.$img,
      chage: 0,
      likeLoading: false,
      collectloading: false,
      showForward: false,
      qrCode: "",
      qrCodeLoading: false,
      colors: [
        {
          bgColor: "#E9EFEF",
          wordColor: "#60807D",
          lineColor: "#B6C4C3",
          level: "青铜会员"
        },
        {
          bgColor: "#F7F7F7",
          wordColor: "#A3AAB0",
          lineColor: "#D2D9E0",
          level: "白银会员"
        },
        {
          bgColor: "#FFF8DE",
          wordColor: "#CEAB21",
          lineColor: "#D3CAB2",
          level: "黄金会员"
        },
        {
          bgColor: "#EDFAFF",
          wordColor: "#59B0E6",
          lineColor: "#BBD0DB",
          level: "铂金会员"
        },
        {
          bgColor: "#F2F5FF",
          wordColor: "#284EB6",
          lineColor: "#C1CBEF",
          level: "钻石会员"
        },
        {
          bgColor: "#FDF7FF",
          wordColor: "#A877C6",
          lineColor: "#DBC6E8",
          level: "钻石Ⅰ会员"
        },
        {
          bgColor: "#F8F2FF",
          wordColor: "#78439F",
          lineColor: "#958AC3",
          level: "钻石Ⅱ会员"
        },
        {
          bgColor: "#F4F2F2",
          wordColor: "#8D4581",
          lineColor: "#907B8C",
          level: "钻石Ⅲ会员"
        },
        {
          bgColor: "#F4F2F2",
          wordColor: "#502E30",
          lineColor: "#795D5E",
          level: "王者会员"
        }
      ]
    };
  },

  computed: {
    mini() {
      if (this.wrapWidth == 1000) {
        return false;
      } else {
        return true;
      }
    },
    showNewAddress() {
      if (!this.item.detailedAddress) return "";
      var reg = /(.*)省|([^市]*)市/g;
      var detailedAddress = this.item.detailedAddress;
      var realAdd = "";
      var temp = [];
      while ((temp = reg.exec(detailedAddress))) {
        realAdd = temp[0];
      }
      // return realAdd;
      return detailedAddress;
    },
    showTime() {
      if (!this.item.createDate) return "";
      var createDate = this.item.createDate;
      // console.log(wechatTimeFormat);
      return this.$time.getDateDiff(createDate);
    },
    s() {
      this.likeLoading = false;
      this.collectloading = false;

      return this.item;
    }
  },
  created() {
    this.getUser();
    // this.init();
    var that = this;
    window.addEventListener("click", function () {
      that.showForward = false;
    });
  },
  methods: {
    //选择位置-展示位置
    addressopen() {
      //
      this.$refs.addmap.open(true, this.item);
    },
    goUserDetail() {
      var user = this.item.userInfo;
      if (user.businessType == 1) {
        this.goHouseAgentDetails(user);
      } else if (user.businessType == 2) {
        this.goVehicleAgentDetails(user);
      } else if (!user.businessType || user.businessType == 0) {
        this.openUrl({
          path: "/index/goldConsultant",
          query: {
            id: user.id
          }
        });
      }
    },
    // 更新浏览记录
    updataViewNum() {
      if (this.wrapWidth == 1000) {
        this.$postHttp("/api/mobile/public/increaseBrowsingRecord", {
          browseRecordId: this.s.id,
          viewersId: JSON.parse(localStorage.getItem("userInfo")).id,
          businessType: 2,
          browsingRecords: 3
        }).then(res => { });
      }
    },
    handleClick(e) {
      console.log(e, this.s);

      if (e == 1) {
        //微信
        this.showForward = true;
        this.getImg(this.s.id, `pages_owner/my/friendsCircleDetails`);
      } else if (e == 2) {
        //朋友圈
        this.getImg(this.s.id, `pages_owner/my/friendsCircleDetails`);
        this.showForward = true;
      } else {
        //复制
        let oInput = document.createElement("input");
        // 将想要复制的值
        oInput.value = `${this.baseUrl}my/friendsCircleDetails?id=${this.s.id ||
          this.$route.query.id}`;
        // 页面底部追加输入框
        document.body.appendChild(oInput);
        // 选中输入框
        oInput.select();
        // 执行浏览器复制命令
        document.execCommand("Copy");
        // 弹出复制成功信息
        this.mySuccessMessage("复制成功");
        // 复制后移除输入框
        oInput.remove();
      }
    },
    getImg(id, url) {
      this.qrCodeLoading = true;
      this.$postHttp("/api/mobile/public/generateAppletQRCode", {
        id,
        url
      }).then(data => {
        console.log(data);
        this.qrCode = data.imagePath;
        this.qrCodeLoading = false;
        // console.log(data.imagePath);
      });
    },
    forward(s) {
      console.log("12e");
      this.showForward = true;
    },
    cancelForward() {
      this.showForward = false;
    },
    preView(item, index) {
      // console.log('itemitem',item);
      // return
      this.$hevueImgPreview({
        multiple: true, // 开启多图预览模式
        nowImgIndex: index, // 多图预览，默认展示第二张图片
        imgList: item.imageList[0] // 需要预览的多图数组
      });
    },
    friendCircleDetail(item) {
      if (this.isNotAllowGoDetails) {
        return;
      }
      if (!item.userInfo) {
        this.myErrorMessage("用户不存在！");
        return;
      }
      if (item.deleteFlag == 1) {
        this.myErrorMessage("该帮友圈已删除");
        return;
      }
      this.openUrl({
        path: "/my/friendsCircleDetails",
        query: {
          id: item.id
        }
      });
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
      } else {
        this.loginstate = false;
      }
    },
    // 关注
    collect(item, flag) {
      if (this.loginstate) {
        if (this.collectloading) return;
        this.collectloading = true;
        this.$postHttp(
          "/api/mobile/vehicleOwner/collectionOrCancelCollection",
          {
            collectorId: JSON.parse(localStorage.getItem("userInfo")).id,
            collectionType: this.types || 3,
            relationId: item.id,
            ids:
              item.collectionAttention && item.collectionAttention.id
                ? item.collectionAttention.id
                : ""
          }
        ).then(data => {
          if (data.code == 200) {
            this.$emit("reData");
            this.$message({
              message: data.msg,
              type: "success",
              offset: 120,
              duration: 2000
            });
            if (item.whetherCollection == 0) {
              this.addIntegral(5, "关注帮友圈");
            }
          } else {
            this.collectloading = false;
          }
        });
      } else {
        this.$message({
          message: "请登录之后在收藏个人！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    goLike(item, flag) {
      if (this.loginstate) {
        if (this.forbidClick) return;
        // 去关注
        var url;
        var type;
        if (flag == 1) {
          // 赞
          url = "/api/mobile/vehicleOwner/upperOrCancelThumb";
          type = 1;
        } else if (flag == 2) {
          // 踩
          url = "/api/mobile/vehicleOwner/downOrCancelThumb";
          type = 2;
        }
        var obj = {
          userId: JSON.parse(localStorage.getItem("userInfo")).id,
          circleId: item.id,
          id: item.likeRecord && item.likeRecord.id ? item.likeRecord.id : "",
          type
        };
        if (flag == 1 && item.whetherThumbsUp != 1) {
          // 赞
          delete obj.id;
        } else if (flag == 2 && item.whetherThumbsDown != 1) {
          // 踩
          delete obj.id;
        }

        if (this.likeLoading) {
          return;
        }
        this.likeLoading = true;
        this.$postHttp(url, {
          // id: item.id,
          ...obj
        }).then(data => {
          if (data.code == 200) {
            this.$emit("reData");
            this.$message({
              message: data.msg,
              type: "success",
              offset: 120,
              duration: 2000
            });
            if (item.whetherThumbsUp == 0) {
              this.addIntegral(6, "点赞");
            }
          } else {
            this.likeLoading = false;
          }
        });
      } else {
        this.$message({
          message: "请登录之后在收藏个人！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    //处理图片
    manageImg(imgs) {
      var arr = [];
      if (null != imgs) {
        if (imgs.indexOf("|") == -1) {
          if (imgs != "") {
            arr.push(imgs);
            console.log("imgs", arr);
            return arr;
          } else {
            return [];
          }
        } else {
          return imgs.split("|");
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.img_list,
.helpFriends_article,
.img_one,
.img_two,
.img_three,
.videovideo,
.byq_bottom,
.byq_new_address {
  // padding-left: 120px;
}

.byq_new_address {
  cursor: pointer;
}

.byq_add {
  // padding-left: 15px;
  margin-top: 14px;
  max-width: 400px;

  height: 34px;
  font-size: 24px;
  font-weight: 400;
  color: #4b8db1;
  line-height: 34px;
  white-space: nowrap;

  // display: inline-block;
  // vertical-align: top;
}

.box {
  position: relative;
  padding-bottom: 200px;

  .jjr {
    width: 58px;
    height: 22px;
    border-radius: 14px;
    border: 1px solid #64b6a8;
    font-size: 12px;
    font-weight: 400;
    color: #64b6a8;
    text-align: center;
    line-height: 20px;
    margin-left: 15px;
    box-sizing: border-box;
    margin-top: 2px;
  }
}

.tit1 {
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;

  .list {
    width: 1200px;
    margin-left: 50%;
    padding-top: 32px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
      cursor: pointer;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        /* width: 60px;
        height: 60px; */
      }

      span {
        vertical-align: middle;
      }
    }

    .sousuo {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 380px;
      height: 50px;
      background: #ffffff;
      border-radius: 4px;
      font-size: 18px;
      overflow: hidden;

      input {
        width: 300px;
        height: 55px;
        line-height: 55px;
        text-indent: 16px;
        font-size: 18px;
      }

      img {
        width: 25px;
        height: 25px;
        margin-left: 20px;
        cursor: pointer;
      }

      p {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 55px;
        background-color: #64b6a8;
        text-align: center;
        line-height: 55px;
        font-size: 24px;
        cursor: pointer;
        color: #ffffff;
      }
    }

    .download {
      width: 200px;
      height: 50px;
      background-color: #64b6a8;
      border-radius: 6px;
      color: #fff;
      text-align: center;
      line-height: 50px;
    }

    .but {
      display: inline-block;
      width: 200px;
      height: 50px;
      background: #64b6a8;
      border-radius: 6px;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
  }
}

.helpFriends {
  width: 1200px;
  margin: 0 auto;
  margin-top: 50px;
  padding-bottom: 16px;

  .helpFriends_title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .helpFriends_title_left {
      display: flex;
      align-items: center;

      .helpFriends_title_left_img {
        cursor: pointer;
        width: 96px;
        height: 96px;
        overflow: hidden;
        border-radius: 50%;
      }

      .helpFriends_title_left_info {
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 96px;

        .helpFriends_title_left_span {
          cursor: pointer;
          color: #333333;
          font-size: 32px;
          font-weight: 500;
        }
      }
    }

    .helpFriends_title_right {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      padding-right: 15px;
    }
  }

  .helpFriends_article {

    // margin-top: 24px;
    .helpFriends_article_text {
      font-size: 18px;
      font-weight: 500;
      color: #333333;
      line-height: 30px;
      cursor: pointer;
    }

    .helpFriends_article_active {
      cursor: pointer;
      font-size: 18px;
      font-weight: 500;
      color: #333333;
      line-height: 30px;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // display: -webkit-box;
      // -webkit-box-orient: vertical;
      // -webkit-line-clamp: 4;
    }

    .unfold {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 26px;
      font-weight: 400;
      color: #64b6a8;

      span {
        cursor: pointer;
      }

      .unfold_img {
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
    }

    .unfold_yc {
      display: none;
    }
  }

  .img_one {
    width: 100%;
    height: 290px;
    margin-top: 30px;

    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
  }

  .img_two {
    width: 100%;
    height: 290px;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;

    img {
      object-fit: cover;
      width: 48%;
      height: 100%;
      border-radius: 8px;
    }
  }

  .img_three {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;

    img {
      object-fit: cover;
      width: 30%;
      height: 100%;
      border-radius: 8px;
      margin-bottom: 20px;
    }
  }

  .video {
    width: 100%;
    height: 220px;
    // margin-top: 10px;
    margin-bottom: 15px;

    video {
      // width: 100%;
      height: 100%;
      // border-radius: 8px;
    }
  }

  .byq_bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    align-items: center;

    .byq_bottom_right {
      display: flex;
      align-items: center;

      .byq_bottom_right_item {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 400;
        color: #333333;
        margin-right: 15px;

        .byq_bottom_right_item_img {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
      }
    }
  }
}

/deep/.el-rate__icon {
  font-size: 30px;
}

.img_list {
  // width: 100%;
  // min-height: 290px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .img_temp1 {
    // display: inline-block;
    height: 220px;
    // padding-bottom: 30%;
    max-width: 300px;
  }

  .img_temp2 {
    height: 220px;
    width: 260px;
    overflow: hidden;
    // padding: 0 40px;
    padding-right: 40px;
    box-sizing: border-box;
    margin-bottom: 40px;
    // padding-bottom: 300px;
  }
}

.show-time {
  color: #ababab;
  // padding-left: 15px;
  font-size: 14px;
}

.erweimaerweima {
  z-index: 999;
  box-sizing: border-box;
  // border: 5px solid red;
  border: 2px solid #64b6a8;
  // width: 320px;
  text-align: center;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999999;
  background-color: #ffffff;
  padding-bottom: 20px;
  border-radius: 5px;

  // display: flex !important;
  //   margin-right: 10px !important;
  img {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    padding: 40px;
  }

  span {
    color: #000;
  }

  p {
    line-height: 24px;
    color: #000;
  }

  div {
    margin-right: 10px !important;
    z-index: 99999;
    display: flex !important;
    flex-direction: column;
    align-items: center;

    img {
      width: 150px;
      height: 150px;
    }

    span {
      color: #000;
    }
  }
}

.vip-level {
  width: 80px;

  text-align: center;
  padding: 4px 0;

  border: 1px solid #bd90d9;
  border-radius: 4px 4px 4px 4px;
  font-size: 15px;
  background: #f6f0ff;
  font-weight: 500;
  color: #bd90d9;
}
</style>
